<!DOCTYPE html>
<!--导入模板标签-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
    <style>
        table{
            margin: 0 auto;
            width: 500px;
        }
        button{
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div id="app">
<div>
    用户编号：<input disabled="disabled"  v-model="user.id"/>
    用户姓名：<input  v-model="user.name"/><br>
    用户年龄：<input  v-model="user.age" />
    用户性别：<input  v-model="user.sex" /><br>
    <button @Click="updateSubmit(user)">提交</button>
</div>
<table border="1px" align="center">
    <caption>用户列表</caption>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr align="center" v-for="user in userList" :key="user.id">
        <td v-text="user.id"></td>
        <td v-text="user.name"></td>
        <td v-text="user.age"></td>
        <td v-text="user.sex"></td>
        <td>
            <button @Click="preMod(user)">修改</button>
            <button @Click="Del(user.id)">删除</button>
        </td>
    </tr>
</table>
</div>
<script src="/static/js/axios.js"></script>
<script src="/static/js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            userList: [],
            user: {
                name: '',
                age: '',
                sex: '',
                id: ''
            }
        },
        methods: {
            async getUserList(){
                axios.defaults.baseURL = 'http://localhost:8090/'
                const {data:res} =  await axios.get('findAll')
                this.userList = res
            },
            preMod(user){
                this.user = user
            },
            async Del(id){
                //三种传参方式
                //1.{params{id: id}}
                //2. ?id=xxx
                //3. /user/id
                await axios.delete('http://localhost:8090/user/'+id)
            },
            async updateSubmit(){
                await axios.put('http://localhost:8090/user',this.user)
            }
        },
        mounted(){
            //渲染成功后，调用用户查询方法
            this.getUserList()
        }
    })
</script>
</body>
</html>
